<template>
  <!-- SINGLE VIDEO -->
  <div id="single-video" class="container-fluid standard-bg">
    <div class="col-lg-1"></div>
    <!-- SINGLE VIDEO -->
    <div class="row col-lg-10">
      <!-- SINGLE VIDEO -->
      <div id="single-video-wrapper" class="col-lg-8 col-md-8">
        <div class="row">
          <!-- VIDEO SINGLE POST -->
          <div>
            <!-- POST L size -->
            <article class="post-video">
              <!-- VIDEO INFO -->
              <div class="video-info">
                <!-- 16:9 aspect ratio -->
                <DPlayer ref="player" :message="playerInit"></DPlayer>
                <div class="spacer dplayer-height"></div>
                <div class="metabox col-lg-7">
                  <span class="meta-i" :class="{'is-selected': isThumb}" @click="setThumb">
                    <i class="fa fa-thumbs-up" aria-hidden="true" :class="{'is-selected': isThumb}"></i>79.4万
                  </span>
                  <span class="meta-i" :class="{'is-selected': isCoins}" @click="setCoins">
                    <i class="fa fa-empire" aria-hidden="true"></i>158.2万
                  </span>
                  <span class="meta-i">
                    <span title="关闭弹幕" @click="hideDanmu" class="is-selected" v-if="isDanmuShow"><i class="fa fa-toggle-on" aria-hidden="true"></i>关闭弹幕</span>
                    <span title="开启弹幕" @click="showDanmu" v-else><i class="fa fa-toggle-off" aria-hidden="true"></i>开启弹幕</span>
                  </span>
                </div>
                <div class="input-group col-lg-6" v-if="false">
                  <input type="text" class="form-control" placeholder="发个友善的弹幕见证当下" v-model="danmu.text">
                  <span class="input-group-addon btn btn-primary" @click="sendDanmu">发送</span>
                </div>
                <div class="spacer"></div>
                <article class="col-lg-3 col-md-3 col-xs-4 post post-medium single-video">
                  <div class="thumbr">
                    <a class="post-thumb" href="javascript:;">
                      <span class="play-btn-border" title="Play"><i
                        class="fa fa-play-circle headline-round" aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1 tag-only" v-if="anime.tag === 1"><span>独家</span></div>
                      <div class="cactus-note ct-time font-size-1 tag-vip" v-if="anime.tag === 2"><span>会员专享</span></div>
                      <img class="img-responsive" :src="anime.cover === null?defaultImg:anime.cover" alt="#">
                    </a>
                  </div>
                </article>
                <div class="col-lg-9">
                  <h3 class="title main-head-title">
                    {{ anime.name }}
                    <span class="btn btn-primary pull-right" @click="setCollect" v-if="!isCollected">追番</span>
                    <span class="btn btn-default pull-right" @click="setCollect" v-else>已追番</span>
                  </h3>
                  <div class="metabox">
                    <span class="meta-i">
                      <i class="fa fa-user"></i><a href="#" class="author" title="John Doe">8bit（8-bit）</a>
                   </span>
                      <span class="meta-i">
                      <i class="fa fa-clock-o"></i>{{ anime.startTime | startTimeFilter }}开播
                   </span>
                      <span class="meta-i">
                      <i class="fa fa-eye"></i>{{ anime.count | countFormatFilter }} 播放
                   </span>
                    <div class="ratings">
                      {{ anime.status | statusFilter }}&nbsp;&nbsp;&nbsp;&nbsp;{{ anime.score | scoreFilter }}
                      <span v-html="printStar"></span>
                    </div>
                  </div>
                  <ul class="social">
                    <li class="social-qq"><a href="https://qzone.qq.com/" target="_blank"
                                             class="fa fa-qq social-icons" title="官方QQ"></a></li>
                    <li class="social-weixin"><a href="https://weixin.qq.com/" target="_blank"
                                                 class="fa fa-weixin social-icons" title="官方微信"></a></li>
                    <li class="social-weibo"><a href="https://weibo.com/" target="_blank"
                                                class="fa fa-weibo social-icons" title="官方微博"></a></li>
                    <li class="social-twitter"><a href="http://www.twitter.com/" target="_blank"
                                                  class="fa fa-twitter social-icons" title="官方推特"></a></li>
                    <li class="social-facebook"><a href="http://www.facebook.com/" target="_blank"
                                                   class="fa fa-facebook social-icons" title="官方脸书"></a></li>
                  </ul>
                  <ul class="footer-tags">
                    <li><a href="#">videos</a></li>
                    <li><a href="#">premium</a></li>
                    <li><a href="#">hair</a></li>
                    <li><a href="#">beauty</a></li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix spacer"></div>
              <!-- DETAILS -->
              <div class="video-content">
                <h2 class="title main-head-title">简介
                  <a data-toggle="collapse" data-parent="#accordion" class="pull-right" href="#collapseOne">
                    <span @click="changeOpen" v-if="open">展开 <i class="fa fa-angle-down"></i></span>
                    <span @click="changeOpen" v-else>收起 <i class="fa fa-angle-up"></i></span>
                  </a>
                </h2>
                <div id="collapseOne" class="panel-collapse collapse">
                  <div class="panel-body" v-html="anime.info"></div>
                </div>
              </div>
              <div class="clearfix"></div>
            </article>

            <!-- COMMENTS -->
            <section id="comments">
              <h2 class="title">{{comments.length}} 评论</h2>
              <div class="widget-area">
                <div class="status-upload">
                  <form>
                    <textarea placeholder="发条友善的评论" v-model="commentText"></textarea>
                    <div class="comment-box-control">
                      <ul>
                        <li><a title="" data-placement="bottom" data-original-title="Video"><i
                          class="fa fa-video-camera"></i></a></li>
                        <li><a title="" data-placement="bottom" data-original-title="Picture"><i
                          class="fa fa-picture-o"></i></a></li>
                        <li><a title="" data-placement="bottom" data-original-title="Smile"><i
                          class="fa fa-smile-o"></i></a></li>
                      </ul>
                      <button type="button" class="btn pull-right" @click="sendComment"><i class="fa fa-share"></i> 发表评论</button>
                    </div>
                  </form>
                </div><!-- Status Upload  -->
              </div><!-- Widget Area -->

              <div class="row comment-posts">
                <Comment v-for="item in comments" :message="item" :key="item.id"></Comment>
              </div>
            </section>
          </div>
        </div>
        <div class="clearfix spacer"></div>
      </div>
      <!-- SIDEBAR -->
      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs" id="video-links">
        <aside class="dark-bg">
          <article>
            <h2 class="icon"><i class="fa fa-gears" aria-hidden="true"></i>视频选集</h2>
            <ul class="sidebar-links">
              <li v-for="item in playerInit.video" :key="item.id" :class="{'active': item.play}">
                <a :href="item.href" :title="item.title">
                  <i class="fa fa-play"></i>
                  <span>第{{ item.no }}话&nbsp;&nbsp;{{ item.title }}</span>
                  <span class="tag tag-vip" v-if="item.auth === 3">会员</span>
                </a>
              </li>
            </ul>
          </article>
        </aside>
        <div class="clearfix spacer"></div>
        <div class="row">
          <!-- RELATED VIDEOS -->
          <div class="col-lg-12 col-md-12 col-sm-12 related-videos">
            <h2 class="icon"><i class="fa fa-trophy" aria-hidden="true"></i>相关推荐</h2>
            <div class="row auto-clear">
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                     <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                         aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="../../assets/img/thumbs/thumb-s.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">Video Lightbox Test</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                                 <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                                                               aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="../../assets/img/thumbs/thumb-s2.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">I graduated from the university of Selfies</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                                 <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                                                               aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="../../assets/img/thumbs/thumb-s3.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">I don’t always surf the internet, but when I do, Eyebrows</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                      <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                         aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="../../assets/img/thumbs/thumb-s4.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">A selfie a day keeps the friends away</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                      <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                             aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="../../assets/img/thumbs/thumb-s5.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">A selfie a day keeps the friends away</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                       <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                                                     aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="../../assets/img/thumbs/thumb-s6.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">A selfie a day keeps the friends away</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
            </div>
            <div class="clearfix spacer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-1"></div>
  </div>
</template>

<script>

import {getByAn, getByAv, sendComment, setCoins, setCollect, setHistory, setThumb} from './play-js'
import DPlayer from '../../components/player/DPlayer'
import Comment from '../../components/comment/Comment'
export default {
  name: 'Play',
  components: {Comment, DPlayer},
  inject: ['reload'],
  data () {
    return {
      open: true,
      // 是否追番
      isCollected: false,
      // 是否点赞
      isThumb: false,
      // 是否投币
      isCoins: false,
      defaultImg: require('../../assets/img/thumbs/thumb-tab5.jpg'),
      anime: {id: 0, name: 'NULL', cover: null, score: 0, count: 2000, startTime: new Date(), info: '<p>NULL</p>', tag: 0, status: 0},
      // playerInit: {视频源， 缩略图， 弹幕API}
      playerInit: {video: [], quality: [], thumbnails: '', addition: '', current: 0},
      danmu: {text: ''},
      isDanmuShow: true,
      comments: [],
      commentText: ''
    }
  },
  mounted () {
    this.init()
  },
  computed: {
    printStar: function () {
      const arr = [
        '<i class="fa fa-star" aria-hidden="true"></i>\n',
        '<i class="fa fa-star-half-o" aria-hidden="true"></i>\n',
        '<i class="fa fa-star-o" aria-hidden="true"></i>\n'
      ]
      let str = ''
      let int = parseInt(this.anime.score / 2)
      for (let i = 0; i < int; i++) {
        str += arr[0]
      }
      const float = parseFloat(this.anime.score % 1)
      if (float >= 0.5) {
        str += arr[1]
        int++
      }
      for (let i = 5 - int; i > 0; i--) {
        str += arr[2]
      }
      return str
    }
  },
  methods: {
    init () {
      let path = this.$route.params.pathMatch
      if (path.includes('eq')) {
        getByAv(this, path.replace('eq', ''))
      } else if (path.includes('ss')) {
        getByAn(this, path.replace('ss', ''))
      }
    },
    changeOpen () {
      this.open = !this.open
    },
    sendDanmu () {
      this.$refs.player.newDanmu()
    },
    hideDanmu () {
      // 关闭弹幕
      this.isDanmuShow = false
      this.$refs.player.hideDanmu()
    },
    showDanmu () {
      // 开启弹幕
      this.isDanmuShow = true
      this.$refs.player.showDanmu()
    },
    setThumb () {
      // 点赞/取消点赞
      setThumb(this, this.anime.id)
    },
    setCollect () {
      // 追番/取消追番
      setCollect(this, this.anime.id)
    },
    setCoins () {
      // 投币
      setCoins(this, this.anime.id)
    },
    sendComment () {
      // 发表评论
      sendComment(this)
    }
  },
  beforeDestroy () {
    setHistory(this, this.$refs.player.getCurrentTime())
  },
  watch: {
    '$route': {
      handler: function () {
        this.init()
      }
    }
  }
}
</script>

<style scoped>
.is-selected {
  color: var(--secondary-color);
}
</style>
